import React, { Component } from 'react'
import { connect } from 'react-redux'

// import { getBooksList } from '../../../requests'
import { getMyBooksList, bookDelete } from '../../../requests/bookDo'
import { antIcon } from '../../loading'
import './index.less'
import { Card, Button, Spin, message, Empty } from 'antd'
const mapStateToprops = state => {
  return {
    booksCollectId: state.user.bookscollect
  }
}

@connect(mapStateToprops)
export default class MyBooks extends Component {
  constructor() {
    super()
    this.state = {
      myBooksList: [],
      userId: JSON.parse(window.sessionStorage.getItem('usermessage')).userId,
      isLoading: true
    }
  }

  //删除书籍
  bookDeleteHandle = bookId => {
    const userId = JSON.parse(window.sessionStorage.getItem('usermessage'))
      .userid
    bookDelete({ userId, bookId }).then(resp => {
      console.log(resp)
      if (resp.data.data.status === 1) {
        const usermessage = JSON.parse(
          window.sessionStorage.getItem('usermessage')
        )
        usermessage.mybooks = resp.data.data.mybooks
        window.sessionStorage.setItem(
          'usermessage',
          JSON.stringify(usermessage)
        )
        this.setState({
          myBooksList: this.state.myBooksList.filter(
            value => value.bookId !== bookId
          )
        })
        message.success('删除成功')
      }
    })
  }
  //到书籍上传页
  toUploadPage = () => {
    this.props.history.push('/admin/booksupload')
  }
  componentDidMount() {
    const myBooksListId = JSON.parse(
      window.sessionStorage.getItem('usermessage')
    ).mybooks
    getMyBooksList({ bookid: myBooksListId }).then(resp => {
      console.log(resp)
      if (resp.data.data.status === 1) {
        this.setState({
          myBooksList: resp.data.data.data,
          isLoading: false
        })
      }
    })
  }
  render() {
    console.log(this.state.myBooksList)
    return (
      <Card title="我的书籍" bordered={false} style={{ width: '100%' }}>
        <Spin indicator={antIcon} spinning={this.state.isLoading}>
          {this.state.myBooksList.length === 0 ? (
            <Empty
              image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
              imageStyle={{
                height: 60
              }}
              description={<span>您没有上传过书籍</span>}
            >
              <Button type="primary" onClick={this.toUploadPage}>
                现在去上传
              </Button>
            </Empty>
          ) : (
            <div className="myBooks">
              {this.state.myBooksList.map(item => {
                return (
                  <div key={item.bookId} className="myBooks-content">
                    <dl>
                      <dt>
                        <img
                          src={require(`../../../assets/booksImages/${
                            item.bookId
                          }.jpg`)}
                          alt=""
                        />
                      </dt>
                      <dd>
                        <span>书名:{item.bookName.substring(0, 13)}</span>
                        <span>作者:{item.author}</span>
                        <span>类型:{item.classify}</span>
                        <span>出版社:{item.bookPress}</span>
                        <span>版本:{item.bookVersion}</span>
                      </dd>
                    </dl>
                    <Button
                      size="small"
                      onClick={this.bookDeleteHandle.bind(this, item.bookId)}
                    >
                      删除书籍
                    </Button>
                  </div>
                )
              })}
            </div>
          )}
        </Spin>
      </Card>
    )
  }
}
